<template>
	<div style="width: 100%;">
		<el-upload v-model:file-list="fileList" name="file" :action="uploadUrl" :headers="headers" :multiple="true"
			:data="params" :on-remove="handleChange" :on-success="handleChange" :limit="limit">
			<el-button type="primary">点击上传</el-button>
		</el-upload>
	</div>
</template>
<script setup>
	import Config from "@/admin.config.js";
	import {
		ref,
		onMounted
	} from 'vue';

	const emits = defineEmits(['update:fileKey'])

	const props = defineProps({
		fileKey: {
			type: String,
			default: ''
		},
		limit: {
			type: Number,
			default: 9
		},
	})

	const fileList = ref([]);

	const visible = ref(false)

	const uploadUrl = Config.baseApi + '/public/storage/store';

	onMounted(() => {
		props.fileKey.split(",").forEach(item => {
			fileList.value.push({
				name: item,
				response: {
					data: {
						fileKey: item
					}
				}
			});
		})
	})

	const handleChange = info => {
		let files = fileList.value.map(item => item.response.data.fileKey);
		if (props.limit > 1) {
			emits('update:fileKey', files.join(","))
		} else {
			emits('update:fileKey', files.length > 0 ? files[0] : "")
		}
	};

	const headers = {
		ntd_token: 'ntd_fmhb'
	}

	const params = ref({
		channelBusinessId: '402809817fbc4f3d017fbcbed26a001d',
		bucketName: 'app-bucket',
		fileKey: undefined
	})
</script>
